<template>
	<view class="container">
		
		
		<view v-for="(item,index) in list" :key="item.id" class="seas-list">
			<view class="disf">
				<image :src="item.user_img" class="user-heaeers"></image>
				<view class="ml50">
					<view class="f34 mt5">{{item.user_name}}</view>
					<view class="colccc f28 mt5">{{item.add_time_str}}</view>
				</view>
			</view>
			<view @click="goPage" :data-uri="'/pages/drift/hig-seas2-desc?id='+item.id">
				<view class="p20 f34">{{item.content}}</view>
				<view v-if="item.image"><image :src="item.image"  mode="heightFix"></image></view>
				<view class="disfr-lr mt30 mb30">
					<view class="colccc f30"><u-icon name="thumb-up" size="40"></u-icon><text class="ml10">{{item.like_num}}</text></view>
					<view class="colccc f30"><u-icon name="edit-pen" size="40"></u-icon><text class="ml10">{{item.comment_num}}</text></view>
				</view>
			</view>
			<view class="bottom-border"></view>
		</view>
		<pageload :page_load="page_load" :next_page="next_page" :list="list" /><!--分页加载状态-->
		<loading :loading="not_load"/><!--加载状态-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onReachBottom,onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';
const not_load=ref(false);
const list=ref([]);
const next_page=ref('');
const page_load=ref(false);
onLoad(async (options)=>{
	loadPage({},false);
});
//页面显示时执行
onShow(()=>{

});

const loadPage= async (options,isPage)=>{
	let ret = await uni.$get('/appapi-driftbottle-highseas',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	not_load.value=true;
	next_page.value=ret.data.next_page;
    if(isPage) list.value=[...list.value,...ret.data.list];
	else list.value=ret.data.list;
	//console.log(list.value);
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
const goPage=(e)=>{
	uni.$utils.dataSetPage(e);
};

// 私聊用户
const fishUser=async(e)=>{
	
};
onPullDownRefresh(()=>{
	//console.log('onPullDownRefresh');
	//not_load.value=false;
	setTimeout(()=>{
		loadPage({},false);
		uni.stopPullDownRefresh();
	}, 1000);
});
//上拉触底加载分页
onReachBottom(()=>{
	if (!next_page.value) return;
	if (page_load.value) return;
	page_load.value=true;
	setTimeout(()=>{
	  loadPage(next_page.value, true); 
	},2000);
});
</script>

<style lang="scss">
	page{background: #fff;}
	.seas-list{
		width: 695rpx;
		min-height: 200rpx;
		margin: 20rpx 30rpx 0 30rpx;
	}
	.bottom-border{
		height: 5rpx;
		background: #f4f4f4;
		width: 100%;
	}
	.user-heaeers{
		width: 110rpx;
		height: 110rpx;
		flex-shrink: 0;
		border-radius: 50%;
		margin-right: 5rpx;
	}
</style>
